<script setup>
import { ref, onMounted } from 'vue'
import {
  getPostList,
  sendPost,
  SearchPost,
  DirectUser
} from '@/api/ForumRequest.js'
import { Edit } from '@element-plus/icons-vue'
import { UserInfo } from '@/stores'
import { nowDate } from '@/utils/DateProcess.js'
import router from '@/router'
// 分类名列表
const list = ref([
  {
    name: '互联网'
  },
  {
    name: '大模型'
  },
  {
    name: '金融'
  }
])
// 帖子列表
const expList = ref([
  {
    id: 1,
    time: '2024-6-7',
    title: '经验',
    content:
      'blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla'
  },
  {
    id: 2,
    time: '2024-6-7',
    title: '经验',
    content:
      'blablablablablablablablablablablablablablablablablablablablablabla\nblablablablablablablablablablablablablablablablablabla'
  },
  {
    id: 3,
    time: '2024-6-7',
    title: '经验',
    content:
      'blablablablablablablablablablablablablablablablablablablablablabla\nblablablablablablablablablablablablablablablablablabla'
  },
  {
    id: 4,
    time: '2024-6-7',
    title: '经验',
    content:
      'blablablablablablablablablablablablablablablablablablablablablabla\nblablablablablablablablablablablablablablablablablabla'
  }
])
// 私信时待上传数据
const SaveInfo = ref({
  senderName: '',
  receiverName: '',
  createTime: Date(),
  status: 0,
  receiverHeadImage: '',
  senderHeadImage: ''
})
const activeName = ref()
activeName.value = list.value[0].name
// 搜索框内容
const searchValue = ref('')
// 发帖区可视标记
const centerDialogVisible = ref(false)
// 编辑内容
const PostinText = ref('')
// 编辑标题
const PostTitle = ref('')
// 待上传内容
const WaitSend = ref({
  userId: '',
  title: '',
  content: ''
})
// 分类切换
const handleClick = (TabPaneName) => {
  console.log(TabPaneName)
}
// 搜索
const searchbtn = async () => {
  console.log(searchValue.value)
  const res = await SearchPost(searchValue.value)
  console.log(res)
  expList.value = res.data.data
  console.log(expList.value)
}
// 编辑
const EditbtnClick = () => {
  centerDialogVisible.value = true
}
// 发帖
const userInfo = UserInfo()
const sendPostbtn = async () => {
  WaitSend.value.userId = userInfo.userid
  WaitSend.value.title = PostTitle.value
  WaitSend.value.content = PostinText.value
  console.log(WaitSend.value)
  const res = sendPost(WaitSend.value)
  console.log(res)
  centerDialogVisible.value = false
}
// 私信
const directbtn = async (receiverName, receiverHeadImage) => {
  SaveInfo.value.senderName = userInfo.username
  SaveInfo.value.receiverName = receiverName
  const getTime = new Date().getTime()
  const time = new Date(getTime)
  SaveInfo.value.createTime = nowDate(time)
  SaveInfo.value.senderHeadImage = userInfo.userAvator
  SaveInfo.value.receiverHeadImage = receiverHeadImage
  const res = await DirectUser(SaveInfo.value)
  console.log(res.data)
  router.push('/communication')
}
onMounted(async () => {
  const res = await getPostList()
  expList.value = res.data.data
})
</script>

<template>
  <div class="cate-tab">
    <el-tabs v-model="activeName" @tab-change="handleClick">
      <el-tab-pane v-for="item in list" :key="item.name" :name="item.name">
        <template #label>
          <span>{{ item.name }} {{ item.value }}</span>
        </template>
      </el-tab-pane>
    </el-tabs>
    <div class="search">
      <el-input v-model="searchValue" placeholder="请输入帖子标题" />
      <el-button @click="searchbtn">搜索</el-button>
    </div>
  </div>
  <div class="data-blank">
    <el-collapse accordion>
      <el-scrollbar height="500px">
        <el-collapse-item v-for="item in expList" :key="item.title">
          <template #title>
            <div class="title">
              <h2>{{ item.title }}</h2>
            </div>
            <div class="user">
              <el-avatar shape="circle" :src="item.headImage" />
              <h2>用户{{ item.username }}</h2>
            </div>
            <div class="time">
              <em>{{ item.timestamp }}</em>
            </div>
          </template>
          <div class="content">
            {{ item.content }}
          </div>
          <el-button
            type="primary"
            @click="directbtn(item.username, item.headImage)"
          >
            私信
          </el-button>
        </el-collapse-item>
      </el-scrollbar>
    </el-collapse>
    <div class="edit">
      <el-button
        type="primary"
        :icon="Edit"
        circle
        class="Editbtn"
        @click="EditbtnClick"
      />
    </div>
  </div>
  <el-dialog
    v-model="centerDialogVisible"
    title="编辑内容"
    width="500"
    align-center
  >
    <el-input
      v-model="PostTitle"
      style="width: 460px"
      :rows="1"
      type="textarea"
      placeholder="Please input"
    />
    <el-input
      v-model="PostinText"
      style="width: 460px"
      :rows="8"
      type="textarea"
      placeholder="Please input"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="sendPostbtn">发帖</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.cate-tab {
  position: relative;
  padding: 0 24px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .search {
    display: flex;
  }
}
.data-blank {
  margin-top: 20px;
  border-radius: 12px;
  padding: 20px 20px;
  text-align: top;
  min-height: 600px;
  position: relative;
  background: #fff;
  .el-collapse {
    .el-collapse-item {
      min-height: 70px;
      :deep(.el-collapse-item__header) {
        min-height: 70px;
      }
      div {
        margin: 0 10px;
      }
      .title {
        h1 {
          min-height: 70px;
          overflow: hidden;
        }
      }
      .time {
        margin-left: 600px;
        line-height: 10px;
        font-size: 10px;
        margin-top: 20px;
      }
      .user {
        font-size: 10px;
        display: flex;
        align-items: center;
      }
      .content {
        border-top: 1px solid;
        padding: 10px 20px;
      }
      .el-button {
        margin-left: 20px;
      }
    }
  }
  .edit {
    margin-top: 20px;
    margin-left: 1000px;
  }
}
</style>
